<template>
    <div v-if="detailStatus" class="m-detail-modal">
        <div class="header">
            竞拍详细
            <span @click="close"><Icon type="close-round"></Icon></span>
        </div>
        <div class="content">
            <Card :bordered="false">
                <label slot="title">竞拍信息</label>
                <Row >
                    <Col span="12"><p>竞拍进度： {{progressStr}} </p></Col>
                    <Col span="12"><p>竞拍状态：
                    <label v-if="detailData.bid_statu == 1 " > 未中标</label>
                    <label v-if="detailData.bid_statu == 2 " > 已中标 </label>
                    <label v-if="detailData.bid_statu == 3 " > 待出结果</label>
                </p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p>拍卖场次：{{detailData.room.name}}</p></Col>
                    <Col span="12"><p>拍卖时间：{{detailData.room.stime }}</p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p>入金/人：{{detailData.earnest_money }}</p></Col>
                    <Col span="12"> <p>入金时间：{{detailData.earnest_time }}</p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p>竞拍最高 (元)：不限</p></Col>
                    <Col span="12"><p>拍卖底价 (元)：{{detailData.min_price}}</p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p>参与人数: {{detailData.auctionListList==null?0:detailData.auctionListList.length}} 人</p></Col>
                </Row>
            </Card>



            <Card :bordered="false">
                <label slot="title">车商基本信息</label>
                <Row >
                    <Col span="12"><p>车商角色：
                     <label v-if="detailData.role_type == 1" > 车源提供方</label>
                      <label v-if="detailData.role_type == 2" > 竞拍方 </label>
                    </p>
                    </Col>

                    <Col span="12"><p> 车行名称：{{detailData.dealer_car_name}}</p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p> 车商名称：{{detailData.dealer_name}}</p></Col>
                    <Col span="12"><p> 登录账号：未知</p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p>所属市场：{{detailData.zscarDealer.bazzar_title }}</p> </Col>
                    <Col span="12"><p>联系电话：{{detailData.zscarDealer.dealer_tel }}</p></Col>
                </Row>
                <Row>
                    <Col span="12"> <p>联系人：{{detailData.zscarDealer.dealer_contacts }}</p> </Col>
                    <Col span="12"><p>门市地址：{{detailData.zscarDealer.dealer_address}}</p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p>车商等级：{{detailData.zscarDealer.dealer_level == 1 ? '普通车商':detailData.zscarDealer.dealer_level == 2 ? '铜牌车商':detailData.zscarDealer.dealer_level == 3?'银牌车商':'金牌车商' }}</p></Col>
                    <Col span="12"><p>收车区域：{{detailData.zscarDealer.dealer_areas}}</p></Col>
                </Row>
                <Row>
                    <Col span="12"><p>收车品牌：{{detailData.zscarDealer.dealer_brand}}</p></Col>
                    <Col span="12"><p>是否推荐：{{detailData.zscarDealer.dealer_isrecom == 1 ? '推荐' : '不推荐'}}</p></Col>
                </Row>
                <Row>
                    <Col span="12"><p>是否垫资：{{detailData.zscarDealer.dealer_ishot == 1 ? '垫资' : '未垫资'}}</p></Col>
                </Row>
            </Card>


            <Card :bordered="false">
                <label slot="title">车源基本信息</label>
                <Row >
                    <Col span="12"><p> 车辆状态：{{detailData.zscarGoods.goods_state}} </p> </Col>
                    <Col span="12"><p> 备注信息：{{detailData.zscarGoods.goods_details}} </p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p> 车辆状态：{{detailData.zscarGoods.goods_check == 0 ?'未审':'已审'}} </p> </Col>
                    <Col span="12"><p>入库时间：{{detailData.zscarGoods.goods_addtime}}</p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p> 销售价 (元)：{{detailData.zscarGoods.goods_price}}</p> </Col>
                    <Col span="12"><p> VIN码：{{detailData.zscarGoods.goods_vinnumber}} </p></Col>
                </Row>
                <Row>
                    <Col span="12"> <p>  车牌号码：{{detailData.zscarGoods.goods_carnumber}} </p> </Col>
                    <Col span="12"><p>  车辆信息：{{detailData.zscarGoods.goods_details}} </p> </Col>
                </Row>
                <Row>
                    <Col span="12"><p>出厂日期：{{detailData.zscarGoods.factory_date}}</p></Col>
                    <Col span="12"><p>上牌日期：{{detailData.zscarGoods.goods_regnumber}}</p></Col>
                </Row>
                <Row>
                    <Col span="12"><p>排量/变速箱：{{detailData.zscarGoods.goods_emission}}</p></Col>
                    <Col span="12"><p>归属地：{{detailData.zscarGoods.goods_carscountry}}</p></Col>
                </Row>
                <Row>
                    <Col span="12"><p>行驶里程（KM）：{{detailData.zscarGoods.goods_kilometre}}</p></Col>
                    <Col span="12"><p>保养情况：{{detailData.zscarGoods.maintenance}}</p></Col>
                </Row>
                <Row>
                    <Col span="12"><p>有无事故：{{detailData.zscarGoods.isaccident}}</p></Col>
                    <Col span="12"><p>保险有效期：{{detailData.zscarGoods.goods_securedate}}</p></Col>
                </Row>
                <Row>
                    <Col span="12"><p>路桥缴费情况：{{detailData.zscarGoods.luqiao_charges==1?'已缴纳':'未缴纳'}}</p></Col>
                    <Col span="12"><p>有无违章：{{detailData.zscarGoods.isillegal==1?'无':'有'}}</p></Col>
                </Row>
                <!--<Row>-->
                    <!--<Col span="12"><p>承诺无法律纠纷：{{detailData.name}}</p></Col>-->
                <!--</Row>-->
            </Card>
            <Card :bordered="false">
                <label slot="title">竞拍明细</label>
                <Table border showStripe :columns="columns" :data="auctionListList"></Table>
            </Card>

        </div>

    </div>
</template>
<script>
    import {formatDateTime} from '../../config/utils'
    export default {
        props: ['detailStatus' , 'detailData'],
        data() {
            return {
                progressStr: '',
                columns: [

                    {
                        title: '联系人',
                        key: 'contacts'
                    },
                    {
                        title: '联系方式',
                        key: 'tel'
                    },
                    {
                        title: '竞拍价格 (万)：',
                        key: 'offer_price'
                    },
                    {
                        title: '竞拍时间',
                        key: 'join_time'
                    },
                    {
                        title: '状态',
                        key: 'bid_statu',
                        render: (h, params) => {
                            const row = params.row;
                            let tagcolor = "black";
                            let text = "1";
                            switch (row.bid_statu) {
                                case '1':
                                    tagcolor = "gray";
                                    text= "未中标";
                                    break;
                                case '2':
                                    tagcolor = "black";
                                    text="已中标";
                                    break;
                                case  '3':
                                    tagcolor = "gray";
                                    text="待出结果";
                                    break;
                            }
                          return h('span', {
                                style: {
                                    color: tagcolor
                                }
                            }, text);
                        }
                    }

                ],
                auctionListList: [],
            }
        },

        watch: {
            detailData(curVal){
                this.auctionListList = curVal.auctionListList;
                this.getProgress(curVal.room);
                curVal.zscarGoods.goods_addtime = formatDateTime(curVal.zscarGoods.goods_addtime*1000)//入库时间
             /*   curVal.zscarGoods.factory_date = formatDateTime(curVal.zscarGoods.factory_date*1000)//出厂日期
                curVal.zscarGoods.goods_regnumber = formatDateTime(curVal.zscarGoods.goods_regnumber*1000)//出厂日期
                curVal.zscarGoods.goods_securedate = formatDateTime(curVal.zscarGoods.goods_securedate*1000)//保险有效期*/
                curVal.zscarGoods.goods_state = this.getGoodsStateStr(curVal.zscarGoods.goods_state);
            }
        },
        methods: {
            getProgress(detailData){
                let  oneThousand  = 1000;
                //报名开始时间
                let enroll_stime = detailData.enroll_stime;
                //报名结束时间
                let enroll_etime = detailData.enroll_etime;

                //拍卖开始时间
                let stime = detailData.stime;
                //拍卖结束时间
                let etime = detailData.etime;
                //报名开始时间的时间戳
                let enroll_sTimestamp = Date.parse(enroll_stime) / oneThousand;
                //报名结束时间的时间戳
                let enroll_eTimestamp = Date.parse(enroll_etime) / oneThousand;
                //拍卖开始的时间戳
                let auction_sTimestamp = Date.parse(stime) / oneThousand;
                //拍卖结束的时间戳
                let auction_eTimestamp = Date.parse(etime) / oneThousand;
                //取出当前时间
                let currentDate = new Date();
                let currentDateTimeamp   = Date.parse(currentDate.toDateString()) / oneThousand;
                let progressStr = '报名未开始';
                //当前时间小于报名开始时间
                if (currentDateTimeamp < enroll_sTimestamp ) {
                    progressStr =  "报名未开始";
                }

                //当前时间大于报名时间并且小于报名结束时间
                if (currentDateTimeamp > enroll_sTimestamp  && currentDateTimeamp <  enroll_eTimestamp  ) {
                    progressStr =  "报名进行中";
                }
                //当前时间大于报名结束时间
                if (currentDateTimeamp > enroll_eTimestamp ) {
                    progressStr =  "报名结束";
                }
                //当前时间小于竞拍开始时间
                if (currentDateTimeamp < auction_sTimestamp ) {
                    progressStr = "竞拍未开始";
                }
                //当前时间大于竞拍开始时间并且小于竞拍结束时间
                if (currentDateTimeamp >  auction_sTimestamp && currentDateTimeamp < auction_eTimestamp ) {
                    progressStr = "竞拍进行中";
                }
                //当前时间大于竞拍结束时间
                if (currentDateTimeamp >  auction_eTimestamp ) {
                    progressStr =  "交易结束";
                }
                this.progressStr = progressStr;
            },
            getGoodsStateStr(statue){
                //pending=未认证、auction_pass=竞拍认证通过、reject=认证失败、sold_out=交易完成、drainage=引流、auction_unpass=竞拍认证失败
                let state = "未知";
                switch (statue){
                    case  'pending':
                        state = '未认证';
                    break;
                    case  'auction_pass':
                        state = '竞拍认证通过';
                        break;
                    case  'reject':
                        state = '认证失败';
                        break;
                    case  'sold_out':
                        state = '交易完成';
                        break;
                    case  'drainage':
                        state = '引流';
                        break;
                    case  'auction_unpass':
                        state = '竞拍认证失败';
                        break;
                }
                return state;
            },
            close() {
                this.$emit('closeModal')
            }
        }
    }
</script>
<style scoped lang="scss">
    .m-detail-modal {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 100;

    .header {
        background-color: #f8f8f9;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        padding-left: 25px;
        padding-right: 5px;
        color: #000;
        box-shadow: 1px 1px 1px rgba(220, 172, 172, .5);

    span {
        float: right;
        padding: 0 20px;
        cursor: pointer;
    }

    }
    .content {
        font-size: 14px;
        padding: 15px 50px 150px 25px;
        overflow-y: auto;
    }

    .ivu-row {
        height: 30px;
    }

    .ivu-card {
        margin-top: 20px;
    }

    }
</style>
